import React, { Component } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'

import { BASE_IMG_URL } from '../../utils/constant'
import { reqCategoryName } from '../../api/admin'


import {
  Card,
  List
} from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons';

function annoyCom (MessCom) {
  return (props) => {
    const navigate = useNavigate()
    const location = useLocation()
    return <MessCom {...props} navigate={navigate} location={location} />
  }
}
class ProductDetails extends Component {
  state = {
    cName1: '',
    cName2: ''
  }
  componentDidMount () {
    this.getCategoryName()
  }

  getCategoryName = async () => {
    const { categoryId, pCategoryId } = this.props.location.state
    if (pCategoryId === '0') {
      const result = await reqCategoryName(categoryId)
      const cName1 = result.data.name
      this.setState({ cName1 })
    } else {
      /*
     //通过多个await方式发多个请求: 后面一个请求是在前一个请求成功返回之后才发送
     const result1 = await reqCategoryName(categoryId) // 获取一级分类列表
     const result2 = await reqCategoryName(pCategoryId) // 获取二级分类
     const cName1 = result1.data.name
     const cName2 = result2.data.name
     */
      const results = await Promise.all([reqCategoryName(categoryId), reqCategoryName(pCategoryId)])
      const cName1 = results[0].data.name
      const cName2 = results[1].data.name
      this.setState({
        cName1,
        cName2
      })
    }
  }
  render () {
    const { name, desc, price, detail, imgs } = this.props.location.state
    const { cName1, cName2 } = this.state
    const title = (
      <div>
        <ArrowLeftOutlined className='iconStyle' onClick={() => this.props.navigate('/product/home')} />
        <span>商品详情</span>
      </div>
    )

    return (
      <div>
        <Card title={title}>
          <List
            bordered
          >
            <List.Item>
              <span className="product-title">商品名称:</span>
              <span>{name}</span>
            </List.Item>
            <List.Item>
              <span className="product-title">商品描述:</span>
              <span>{desc}</span>
            </List.Item>
            <List.Item>
              <span className="product-title">商品价格:</span>
              <span>{price}元</span>
            </List.Item>
            <List.Item>
              <span className="product-title">所属分类:</span>
              <span>{cName2} {cName1 ? '-->' + cName1 : ''}</span>
            </List.Item>
            <List.Item>
              <span className="product-title">商品图片:</span>
              <span className="product-img">
                {
                  imgs.map(img => {
                    return <img key={img} src={BASE_IMG_URL + img} alt='img' />
                  })
                }
              </span>
            </List.Item>
            <List.Item>
              <span className="product-title">商品详情:</span>
              <span dangerouslySetInnerHTML={{ __html: detail }}></span>
            </List.Item>
          </List>
        </Card>
      </div>
    )
  }
}
export default annoyCom(ProductDetails)